<template>
  <!--我的贵宾卡页面-->
  <div>
    <ul v-if="vipcardList.length<=0" class="null_content">
      <li><img src="../../../assets/null.png" alt="" width="155" ></li>
      <li>这里空空如也</li>
    </ul>
    <ul class="list">
      <li v-for="item in vipcardList">
        <p>
          <img :src="item.coverImg | imgPathFilter" alt="" width="160" height="101">
          <span @click="lookServer(item.vipcardCategoryCode,item.accountGoodsId)" v-if="item.isPrivatedata==1"><img src="../../../assets/wenhao.png" alt="" width="15" >查看权益</span>
        </p>
        <ul>
          <li>{{item.goodsName}}</li>
          <li class="disabled" v-if="item.vipCardState==2">已过期</li>
          <li class="disabled" v-if="item.vipCardState==5">已冻结</li>
          <li class="disabled" v-if="item.vipCardState==6">退卡申请中</li>
          <li class="disabled" v-if="item.vipCardState==7">已退卡</li>
          <li class="disabled" v-if="item.vipCardState==8 && item.isReceiver==1">已转卡</li>
          <li class="disabled" v-if="item.isPrivatedata==1 && item.vipCardState==1 && item.vipcardCategoryCode=='VIP' &&item.haveVipServer">
            <img src="../../../assets/smallerweima.png" alt="" width="15" v-if="item.vipServerIsExpre">
            <img src="../../../assets/smallsaoma.png" alt="" width="15" v-else>
            <span v-if="item.vipServerIsExpre">贵宾服务已到期</span>
            <span v-else @click="goSaomaDetail(item.accountGoodsId)">点我使用贵宾厅</span>
          </li>
          <li v-if="item.isPrivatedata==2 && (item.vipCardState==1|| item.vipCardState==0)" @click="goWanshan(item.accountGoodsId,item.vipcardCategoryCode)">
            <img src="../../../assets/warn.png" alt="" width="15">完善资料
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getMyguibinka} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: 'myguibinka',
    props: {},
    data() {
      return {
        vipcardList: []
      };
    },
    methods: {
      lookServer(vipcardCategoryCode,accountGoodsId){
        if(vipcardCategoryCode=='VIP'){
          this.$router.push({path:'huiyuandetail',query:{accountGoodsId:accountGoodsId}});
        }
        if(vipcardCategoryCode=='GUEST'){
          this.$router.push({path:'yaofangka',query:{accountGoodsId:accountGoodsId}});
        }
        console.log(accountGoodsId)
      },
      goSaomaDetail(accountGoodsId){
        this.$router.push({path: 'saomadetail', query: {accountGoodsId: accountGoodsId}})
      },
      goWanshan(accountGoodsId,vipcardCategoryCode){
        if(vipcardCategoryCode=='VIP'){
          this.$router.push({path: 'wanshanziliao', query: {accountGoodsId: accountGoodsId,type:2}})
        }
        if(vipcardCategoryCode=='GUEST'){
          this.$router.push({path: 'yaokewanshan', query: {accountGoodsId: accountGoodsId,type:2}})
        }
      },
      getMyguibinkaData(params){
        let that = this;
        getMyguibinka(params).then(res => {
          console.log(res);
          if (res.code = 100) {
            that.vipcardList = res.object.vipcardList;
            let noPerfectNum=res.object.noPerfectNum;
            if(noPerfectNum>0){
              Toast.text("您有贵宾卡尚未完善资料，请及时完善");
            }
          } else {
            Toast.fail(res.info);
          }
        })
      }
    },
    created() {
      this.getMyguibinkaData({});
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .null_content{
    padding-top:50%;
    li:nth-child(2){
      margin: 10px 0 20px;
      color: #bababa;
      font-size: 14px;
    }
  }
  .list{
    >li{
      display: flex;
      border-bottom: 1px solid #ddd;
      margin: 10px;
      padding-bottom: 10px;
      p,ul{
        flex: 1;
      }
      p{
        text-align: left;
        font-size: 13px;
        color: #fff;
        position: relative;
        width: 160px;
        span{
          position: absolute;
          background-color: rgba(0,0,0,0.3);
          width: 160px;
          height: 101px;
          border-radius: 6px;
          top: 0;
          left: 0;
          text-align: center;
          line-height: 101px;
          img{
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }
      ul{
        text-align: right;
        li:first-child{
          font-size: 16px;
          color: #111;
          margin-bottom: 53px;
        }
        li:last-child{
          color: #2c92f0;
          font-size: 14px;
          img{
            vertical-align: sub;
            margin-right: 5px;
          }
          &.disabled{
            color: #999;
          }
        }

      }
    }
    >li:last-child{
      border-bottom: none;
    }
  }
</style>

